<page-header title="创建组合" [breadcrumb]="breadcrumb" [action]="action" [back]="true">
    <ng-template #breadcrumb>
        <ql-breadcrumb>
            <ql-breadcrumb-item>产品管理</ql-breadcrumb-item>
            <ql-breadcrumb-item>产品组合</ql-breadcrumb-item>
            <ql-breadcrumb-item>创建组合</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
    <ng-template #action>
      <ql-button type="primary" (click)="save()">提交</ql-button>

      <!--<ql-button type="primary" [routerLink]="['/product/combo-list']" (click)="creatCombo()">提交</ql-button>-->
    </ng-template>
</page-header>

<page-container>
    <ql-form label-width="130px">
        <ql-card header="产品详情">
            <div ql-row>
                <ql-form-item label="产品组合名称" ql-col span="12">
                    <ql-input [(ngModel)]="groupname"> </ql-input>
                </ql-form-item>
                <ql-form-item label="产品组合编码" ql-col span="12">
                    <ql-input [(ngModel)]="groupcode"> </ql-input>
                </ql-form-item>
                <ql-form-item label="产品组合介绍" ql-col span="12">
                    <ql-input [(ngModel)]="desc"></ql-input>
                </ql-form-item>
                <ql-form-item label="预期利率" ql-col span="12">
                    <ql-input [(ngModel)]="expectminratio"></ql-input>
                </ql-form-item>
            </div>
        </ql-card>
        <ql-card header="业务及办理规定">
            <div ql-row>
                <ql-form-item label="适用范围" ql-col span="24">
                    <ql-input type="textarea" [autosize]="{ minRows: 6, maxRows: 10}" placeholder="请输入内容" [(ngModel)]="rangenotes">
                    </ql-input>
                </ql-form-item>
                <ql-form-item label="办理规定" ql-col span="24">
                    <ql-input type="textarea" [autosize]="{ minRows: 6, maxRows: 10}" placeholder="请输入内容" [(ngModel)]="agreement"></ql-input>
                </ql-form-item>
                <ql-form-item label="注意事项" ql-col span="24">
                    <ql-input type="textarea" [autosize]="{ minRows: 6, maxRows: 10}" placeholder="请输入内容" [(ngModel)]="attentionnotes">
                    </ql-input>
                </ql-form-item>
            </div>
        </ql-card>
        <ql-card>
            <ng-template #header>
                <card-header title="选择产品">
                    <ql-button type="primary" (click)="onSelectProduct()" size="small">选择产品</ql-button>
                </card-header>
            </ng-template>
            <data-table [model]="productList">
                <ql-table-column model-key="productname" label="产品名称"></ql-table-column>
                <ql-table-column model-key="productcode" label="产品代码"></ql-table-column>
                <ql-table-column model-key="productcategory" label="产品类别"></ql-table-column>
                <ql-table-column model-key="riskLevel" label="风险等级"></ql-table-column>
                <ql-table-column model-key="recommandtypename" label="推荐类别"></ql-table-column>
                <ql-table-column model-key="expiredate" label="停售时间"></ql-table-column>
                <ql-table-column model-key="productprofit" label="产品利率"></ql-table-column>
              <ql-table-column model-key="count" label="数量"></ql-table-column>
              <ql-table-column label="操作" width="250px">
                <ng-template #slot let-scope="scope">
                  <ql-button type="text" (click)="delProduct(scope.rowData.productcode)">移除</ql-button>
                </ng-template>
              </ql-table-column>
            </data-table>

        </ql-card>
        <!--<ql-card header="促销活动">-->
            <!--<div ql-row>-->
                <!--<ql-form-item ql-col span="12" label="活动主题">-->
                    <!--<ql-input placeholder="请输入内容"></ql-input>-->
                <!--</ql-form-item>-->
                <!--<ql-form-item label="活动范围" ql-col span="12">-->
                    <!--<ql-select placeholder="选择活动范围" style="float: left">-->
                        <!--<ql-option *ngFor="let item of []" [label]="item.label" [value]="item.value"> </ql-option>-->
                    <!--</ql-select>-->
                <!--</ql-form-item>-->
                <!--<ql-form-item label="活动内容" ql-col span="12">-->
                    <!--<ql-input placeholder="请输入内容"></ql-input>-->
                <!--</ql-form-item>-->
                <!--<ql-form-item label="活动附带权益" ql-col span="12">-->
                    <!--<ql-input placeholder="请输入内容"></ql-input>-->
                <!--</ql-form-item>-->
                <!--<ql-form-item label="活动开始时间" ql-col span="12">-->
                    <!--<ql-date-picker></ql-date-picker>-->
                <!--</ql-form-item>-->
                <!--<ql-form-item label="活动结束时间" ql-col span="12">-->
                    <!--<ql-date-picker></ql-date-picker>-->
                <!--</ql-form-item>-->
            <!--</div>-->
        <!--</ql-card>-->
    </ql-form>
</page-container>
